<template>
	<view>
		<cu-custom bgColor="bg-blue" style="background-color: #5B1FDE;" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="whole-box">
			<image class="bg-lottery" :src="detail.lottery && detail.lottery.lottery_icon ? detail.lottery.lottery_icon : '../../../static/bg-lottery.png'" mode="widthFix"></image>
			<view class="lottery-content">
				<!-- <view class="rules-box"><text class="rules">活动规则</text></view> -->
					<!-- <view class="text-white margin-top"> 当前报名人数 {{newnum}} / {{detail.lottery && detail.lottery.lottery_num}}</view> -->
				<!-- <view class="integral-box">当前剩余积分 {{detail.account && detail.account.user_integral ? detail.account.user_integral : '0'}}</view> -->
				<view class="lottery-box">
					<image class="bg-box" src="../../../static/bg-lottery-square.png"></image>
					<view class="lottery">
						<view class="lottery-item">
							
							<view class="lottery-start" @tap="startLottery" v-if="newnum >= (detail.lottery && detail.lottery.lottery_num)">
								<view style="background-color: #ffffff;" class="box" :class="click?'':'gray'">
									<view class="content">
										<!-- <text class="info" >抽奖</text> -->
										<image :src="win_img" mode="widthFix" style="width: 65px;"></image>
									</view>
								</view>
							</view>
							
							<view class="lottery-start" @tap="BmLottery" v-if="newnum < (detail.lottery && detail.lottery.lottery_num) && join_status == 0">
								<view class="box" :class="click?'':'gray'">
									<view class="content">
										<text class="info" >报名</text>
										<text class="desc" style="font-size: 14px;">消耗{{detail.lottery && detail.lottery.lottery_integral ? detail.lottery.lottery_integral : 0}}积分</text>
									</view>
								</view>
							</view>
							
							<view class="lottery-start"  v-if="newnum < (detail.lottery && detail.lottery.lottery_num) && join_status == 1">
								<view class="box" :class="click?'':'gray'">
									<view class="content">
										<text class="info" >等待满人抽奖</text>
									</view>
								</view>
							</view>
							<view class="list">
								<block v-for="(item,i) in list" :key="i">
									<view class="list-item" :class="index==i?'on':''">
										<view class="content">
											<image :src="item.pic">
											<text>{{item.name}}</text>
										</view>
									</view>
								</block>
							</view>
						</view>
						
						<block v-if="showToast">
							<view class="mask"></view>
							<view class="lottery-alert">
								<view class="h1">恭喜您</view>
								<view><image :src="list[index].pic" mode="widthFix"></view>
								<view class="h2">获得了 {{list[index].name}}</view>
								<view class="btnsave" @tap="conFirm">确定</view>
							</view>
						</block>
						<!-- 已有<text>{{detail && detail.num > 0 ? detail.num : 0}}</text>人中奖 -->
					<!-- 	<view class="note1">已有<text>{{detail && detail.count > 0 ? detail.count : 0}}</text>人参与 </view>
					 -->	
						<view class="list-bat-a">
							<view class="bat-a" @tap="" v-if="detail.account">剩余抽奖次数{{detail.account.golden_eggs}}次</view>
							<view class="bat-a" @tap="goPage('/pages/shop/marketing/points_reward_list')">中奖列表</view>				
						</view>
							 <view class="reward-list">
							<swiper autoplay="true" interval="3000" duration="500" circular="true" vertical="true" disable-touch="true">
								<block v-for="(live, i) in detail.lottery_log" :key="i">
									<swiper-item>
										<view class="reward">
											<text class="remark">{{live.reward_title}}</text>
											<!-- <text class="time">{{$common.timeFormat(live.created_at)}}</text> -->
										<text class="time">获得{{live.reward_name}}</text>
										</view>
									</swiper-item>
								</block>
								<!-- <swiper-item>
									<view class="reward">
										<text class="remark">用户名称抽中了50元话费充值</text>
										<text class="time">12-16 15:00:36</text>
									</view>
								</swiper-item> -->
							</swiper>
						</view>
					</view>
					
				</view>
				
				<view class="bot-btn white-btn" @tap="showModal" style="display: none;">点击分享好友</view>
				<view style="display: none;" class="bot-btn purple-btn" @tap="goPage('/pages/shop/marketing/points_reward_list')">中奖列表</view>
				
				
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<view class="bg-img">
					<image class="bg-lottery" :src="shareimg" mode="widthFix"></image>
				</view>
				<view class="cu-bar" style="width: 70%;height: auto;margin: 0 auto;">
					<!-- <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">保存图片</view> -->
					<view class="cu-btn bg-white round margin-right" @tap="hideModal" >关闭图片</view>
					<view class="cu-btn bg-orange round " @tap="bc_code">保存图片</view>
					
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '抽奖',
				isStart: 1,
				modalName: null,
				score: 10,
				detail:[],
				member:null,
				shareimg:'',
				win_img:'../../../static/1-min.jpg',
				wim_list: [{
					img: '../../../static/2-min.jpg',
				}, {
					img: '../../../static/3-min.jpg',
				},{
					img: '../../../static/4-min.jpg',
				}, {
					img: '../../../static/5-min.jpg',
				}],
				list: [{
					img: '../../../static/logo.png',
					title: '谢谢参与'
				}, {
					img: '../../../static/logo.png',
					title: '美女一个'
				}, {
					img: '../../../static/logo.png',
					title: '宝马一辆'
				}, {
					img: '../../../static/logo.png',
					title: '单车一辆'
				}, {
					img: '../../../static/logo.png',
					title: '鸡蛋一蓝'
				}, {
					img: '../../../static/logo.png',
					title: '500红包'
				}, {
					img: '../../../static/logo.png',
					title: '靓号一个'
				}, {
					img: '../../../static/logo.png',
					title: '鲜花一蓝'
				}],
				index: -1,
				count: 8,
				timer: 0,
				speed: 200,
				times: 0,
				cycle: 2,
				prize: -1,
				click: true,
				showToast: false,
				reward:'',
				newnum:0,
				blloding:false,
				id:0,
				join_status: 0
			}
		},
		onLoad(options) {
			console.log(123)
			if (options.id) {
				this.id = options.id
			}
			if (this.$common.loginAuth(true)) {
				this.$common.getConfig().then((config) => {
					this.config = config
					
				})
				this.$common.getMember().then((member) => {
					this.member = member
				})
				uni.showLoading({
					title: '加载中...'
				})
				this.getDetail()
			}
		},
		onShow(){
			//this.getDetail()
		},
		methods: {
			 showModal(e) {
				 if (this.member.id > 0 && this.detail.lottery.id && this.detail.share_url != '') {
					 uni.showLoading({
					 	title: '加载中...'
					 })
					 console.log(this.member);
				 	this.$http.post('get_poster', {
				 		type: 'lottery',
				 		id: this.member.id,
				 		share_url: this.detail.share_url,
				 		member_id: this.member.id,
				 		member_name: this.member.nickname ? this.member.nickname : this.member.username,
				 		member_head: this.member.head_portrait,
				 		member_level: 0,
						lottid:this.detail.lottery.id,
				 		reget: true
				 	}).then((res) => {
						uni.hideLoading()
				 		this.shareimg = res.data.data
						this.modalName = 'Image'
				 	})
					
				 }
				
			},
			hideModal(e) {
				this.modalName = null
			},
			
			bc_code(){
				
				uni.showLoading({
					title: '保存中...',
				})
				let that = this;
				//console.log('保存二维码')
				uni.downloadFile({           //获得二维码的临时地址
					url:this.shareimg,
					success:(res)=>{
						//console.log('获取url',res)
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,//传入临时地址
								success: () => {
									this.$common.showError('保存成功')//封装的提示
								},
								fail : () => {
									this.$common.showError('保存失败')
								}
							})
							uni.hideLoading()
						}
					}
				})
			},

			getDetail(){
				let id = this.id
				this.$http
					.get('lottery_points_detail', {
						id: id
					})
					.then((response) => {
						
						this.detail = response.data.data
						this.list = response.data.data.lottery.lottery_data
						if (this.detail.join != '') {
							this.join_status = 1
						}
						this.newnum = this.detail.join_num
						uni.hideLoading()
						console.log(this.detail)
					})
					.catch((response) => {
						console.log(response)
					})
			},
			startLottery() {
				if (!this.click) {
					return
				}
				
				uni.showLoading({
					title: '加载中...'
				})
				this.click = false
				this.$http
					.get('points_lottery_judge', {
						id: this.detail.lottery.id
					})
					.then((response) => {
						console.log(response.data.data.status)
						if (response.data.data.status != '-1') {
							this.reward = response.data.data.status
							
							if (!isNaN(this.reward)) {
								let wim_list = this.wim_list;
								for(var i = 0; i < wim_list.length; i ++) {
									this.win_img = wim_list[i].img
								}
								this.startRoll();
								if(this.detail.account.golden_eggs>0){
									console.log(999)
									this.detail.account.golden_eggs = this.detail.account.golden_eggs -1 
								}
								
							} else {
								this.$common.showError("抽奖有误")
								return
							}
							this.click = true;
						} else {
							this.$common.showError(response.data.data.msg)
							this.click = true;
							return
						}
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
						this.click = false;
					})
				
			},
			BmLottery(){
				if (this.blloding) return 
				this.blloding = true
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('poing_lottery_bm', {
						id: this.detail.lottery.id
					})
					.then((response) => {
						console.log(response.data.data.status)
						if (response.data.data.status != '-1') {
							this.$common.showError(response.data.data.msg)
							this.getDetail()
						} else {
							this.$common.showError(response.data.data.msg)
							
							return
						}
						this.blloding = false
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
					})
			},
			reward_save(){
				var key = this.reward;
				uni.showLoading({
					title: '正在处理...'
				})
				// console.log(!isNaN(parseInt(key)) + '---- ' + key)
				if (!isNaN(this.reward)) {
					this.$http
						.get('points_lottery_save', {
							id: this.detail.lottery.id,
							key: key
						})
						.then((response) => {
							console.log(response.data.data.status)
							if (response.data.data.status == 200){
								console.log(454545)
								this.detail.account.user_integral = this.detail.account.user_integral - parseFloat(this.detail.lottery.lottery_integral);
								if (response.data.data.integral && response.data.data.integral > 0) {
									this.detail.account.user_integral = this.detail.account.user_integral + parseFloat(response.data.data.integral)
								}
								var that = this;
								that.showToast = true;
							} else {
								this.$common.showError(response.data.data.msg)
								return
							}
							uni.hideLoading()
						})
						.catch((response) => {
							console.log(response)
							uni.hideLoading()
						})
				} else {
					this.$common.showError("抽奖有误")
					return
				}
			},
			startRoll() {
				// console.log(this.times)
				this.times += 1
				this.oneRoll()
				if (this.times > this.cycle + 10 && this.prize === this.index) {
					clearTimeout(this.timer)
					this.prize = -1
					this.times = 0
					this.speed = 200
					this.cviewck = true;
					var that = this;
					setTimeout(res => {
						// this.reward_save()
						that.showToast = true;
						that.win_img ='../../../static/1-min.jpg'
					}, 500)
				} else {
					if (this.times < this.cycle) {
						this.speed -= 10
					} else if (this.times === this.cycle) {
						// const index = parseInt(Math.random() * 8, 0) || 0;
						// console.log(index)
						console.log(this.reward)
						this.prize = this.reward;
						if (this.prize > 7) {
							this.prize = 7
						}
					} else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index +
							1)) {
						this.speed += 110
					} else {
						this.speed += 20
					}
					if (this.speed < 40) {
						this.speed = 40
					}
					this.timer = setTimeout(this.startRoll, this.speed)
				}
			},
			oneRoll() {
				let index = this.index
				const count = this.count
				index += 1
				if (index > count - 1) {
					index = 0
				}
				this.index = index
			},
			conFirm(){
				this.click = true
				this.showToast= false
			}
		},
	}
</script>

<style>
	.cu-dialog{
		width: auto!important;
		background: #f1554a!important;
	}
	 .cu-form-group .title {
	        min-width: calc(4em + 15px);
	}

	page{
		height: 100vh;
		background-color: #605FEE;
	}
	.whole-box{
		width: 100%;
		height: calc(100vh - 45px);
		position: relative;
		background-color: #605FEE;
	}
	.whole-box .bg-lottery{
		width: 100%;
		
	}
	.whole-box .bg-lottery div{
		background-position: inherit!important;
	}
	.whole-box .lottery-content{
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: calc(100vh - 45px);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>

<style>
	.lottery-content .rules-box{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.rules-box .rules{
		margin-left: calc(750rpx - 166rpx);
		width: 166rpx;
		text-align: center;
		height: 64rpx;
		line-height: 64rpx;
		background: rgba(0, 0, 0, 0.37);
		border-top-left-radius: 32rpx;
		border-bottom-left-radius: 32rpx;
		font-size: 28rpx;
		color: #FEFEFE;
	}
	.lottery-content .integral-box{
		margin-top: 50rpx;
		width: 368rpx;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 7rpx 3rpx 0rpx #A551DF;
		border-radius: 35rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #5900D6;
	}
</style>

<style>
	.lottery-content .lottery-box {
		margin-top: 30rpx;
		padding: 0 30rpx;
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}
	.lottery-box .bg-box{
		width: 100%;
		height: 100%;
	}
	.lottery-box .lottery{
		padding: 48rpx 78rpx;
		width: 750rpx;
		height: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.lottery .lottery-item {
		/* margin-top: 10rpx; */
		width: 100%;
		height: 490rpx; /* 3*150+2*20 */
		position: relative;
	}

	.lottery .lottery-item .list .list-item {
		width: 184rpx;
		height: 150rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		position: absolute;
	}
	.lottery .lottery-item .list .list-item:nth-child(1) {
		left: 0;
	}

	.lottery .lottery-item .list .list-item:nth-child(2) {
		left: 206rpx;
	}

	.lottery .lottery-item .list .list-item:nth-child(3) {
		right: 0;
	}

	.lottery .lottery-item .list .list-item:nth-child(4) {
		right: 0;
		top: 170rpx
	}

	.lottery .lottery-item .list .list-item:nth-child(5) {
		right: 0;
		top: 340rpx
	}

	.lottery .lottery-item .list .list-item:nth-child(6) {
		left: 206rpx;
		top: 340rpx
	}

	.lottery .lottery-item .list .list-item:nth-child(7) {
		left: 0;
		top: 340rpx
	}

	.lottery .lottery-item .list .list-item:nth-child(8) {
		left: 0;
		top: 170rpx
	}
	
	.lottery .lottery-item .list .list-item .content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.lottery .lottery-item .list .list-item .content image {
		width: 100rpx;
		height: 100rpx;
	}

	.lottery .lottery-item .list .list-item .content text{
		width: 160rpx;
		text-align: center;
		font-size: 28rpx;
		color: #708abf;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.lottery .lottery-item .list .list-item.on{
		background-color: #FF4F40;
	}
	.lottery .lottery-item .list .list-item.on .content text{
		color: #FFFFFF;
	}

	.lottery .lottery-item .lottery-start {
		width: 184rpx;
		height: 150rpx;
		position: absolute;
		left: 206rpx;
		top: 170rpx
	}
	.lottery .lottery-item .lottery-start .box {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
		background-color: #FF4F40;
	}
	.lottery .lottery-item .lottery-start .box .content {
		/* cursor: pointer; */
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.lottery .lottery-item .lottery-start .box .content .info {
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.lottery .lottery-item .lottery-start .box .content .desc {
		margin-top: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFE400;
	}

	.lottery .lottery-item .lottery-start .box:active {
		opacity: .7
	}
	.lottery .lottery-item .lottery-start .box.gray {
		opacity: .5
	}
	.lottery .lottery-item .lottery-start .box.gray text {
		color: #708abf;
	}

	.mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
		position: fixed;
		overflow: hidden;
		z-index: 222;
		top: 0;
		left: 0
	}

	.lottery-alert {
		max-width: 600rpx;
		text-align: center;
		z-index: 10000;
		border-radius: 20rpx;
		background: #fff;
		padding: 20px;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		top: 50%;
		transform: translateY(-50%)
	}

	.lottery-alert .h1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #d92b2f
	}

	.lottery-alert image {
		display: block;
		width: 100%;
	}

	.lottery-alert .h2 {
		/* font-weight: 400; */
		color: #d92b2f;
		font-size: 30rpx;
		padding-top: 30rpx
	}

	.lottery-alert view {
		color: #666;
		font-size: 32rpx;
		padding-top: 10rpx
	}

	.lottery-alert .btnsave {
		padding-top: 0;
		border-radius: 6rpx;
		box-shadow: none;
		height: 80rpx;
		cursor: pointer;
		line-height: 80rpx;
		color: #fff;
		margin-top: 24rpx;
		background: linear-gradient(180deg, rgba(213, 60, 63, 1) 0%, rgba(201, 20, 24, 1) 100%);
		font-size: 32rpx
	}
</style>

<style>
	.lottery-box .note1{
		margin-top: 80rpx;
		font-size: 28rpx;
		color: #FEFEFE;
	}
	.lottery-box .note1 text{
		color: #F8E738;
	}
	.lottery-box .reward-list{
		margin-top: 20rpx;
		height: 40rpx;
	}
	.reward-list swiper{
		width: 100%;
		height: 40rpx;
	}
	.reward-list swiper-item{
		width: 100%;
		height: 40rpx;
	}
	.reward-list .reward{
		height: 40rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.reward-list .reward text{
		font-size: 26rpx;
		color: #FEFEFE;
		opacity: 0.8;
	}
	.reward-list .reward text.remark{
		flex: 1;
		overflow: hidden;    
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.reward-list .reward text.time{
		margin-left: 10rpx;
		flex-shrink: 0;
	}
	
	.lottery-content .bot-btn{
		width: 500rpx;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}
	.lottery-content .bot-btn.white-btn{
		background: #FFFFFF;
		color: #5B1FDE;
	}
	.lottery-content .bot-btn.purple-btn{
		background: #5B1FDE;
		color: #FFFFFF;
	}
	.bat-a{
		background-color: #0081ff;
		color: #FFFFFF;
		width: 230px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		border-radius: 15px;
        margin: 12% 2% 0 0;
	}
	.list-bat-a{
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: end;
	}
</style>